import React, { useMemo, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { ListRawState } from "../home";
import { Swiper, NavBar, Cell, ActionBar, Button } from "react-vant";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { useDispatch, useSelector } from "react-redux";
import { addToCarActionCreator } from "../../store/car/car";
import { RootState } from "../../store";
const Index: React.FC = () => {
  // 获取 state 数据
  const location = useLocation();
  const navigate = useNavigate();
  const item = location.state as ListRawState;
  const [end, setEnd] = useState(3);
  const dispatch = useDispatch();
  // 获取仓库数据 state.car.car
  const car = useSelector((state: RootState) => state.car.car);
  // 获取总数量
  const totalCount = car.reduce((p, n) => {
    return p + n.count;
  }, 0);

  const loadMore = () => {
    setEnd(end == 3 ? 100 : 3);
  };

  const messageList = useMemo(() => {
    return [...item.messageList].sort((a, b) => {
      return (
        new Date(b.createDateTime).getTime() -
        new Date(a.createDateTime).getTime()
      );
    });
  }, [item.messageList]);

  const handleClickToAddCar = () => {
    // 加入购物车
    dispatch(
      addToCarActionCreator({
        ...item,
        count: 1,
        state: true,
      })
    );
  };

  return (
    <div>
      <NavBar title="详情" onClickLeft={() => navigate(-1)} />
      <Swiper>
        {item.image.map((v, i) => {
          return (
            <Swiper.Item key={i}>
              <img src={v} alt="" width={"100%"} />
            </Swiper.Item>
          );
        })}
      </Swiper>
      <div style={{ padding: 6 }}>
        <h3>{item.title}</h3>
        <p>{item.desc}</p>
        <p style={{ color: "#ff5000", fontWeight: "bold" }}>￥：{item.price}</p>
      </div>

      <Cell.Group>
        {messageList.slice(0, end).map((v, i) => {
          return (
            <Cell
              key={i}
              title={
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <span>{v.nickname}</span>
                  <span>{v.createDateTime}</span>
                </div>
              }
              label={v.content}
              icon={
                <img
                  src={v.avator}
                  style={{ height: 50, borderRadius: "50%" }}
                ></img>
              }
            ></Cell>
          );
        })}
      </Cell.Group>
      <Button type="primary" round block onClick={() => loadMore()}>
        {end === 3 ? "展开评论" : "收起评论"}
      </Button>
      <div style={{ height: 50 }}>
        <ActionBar>
          <ActionBar.Icon
            icon={<ChatO />}
            text="客服"
            onClick={() => console.log("chat click")}
          />
          <ActionBar.Icon
            icon={<CartO />}
            text="购物车"
            badge={{ content: totalCount || "" }}
            onClick={() => navigate("/car")}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            text="店铺"
            onClick={() => console.log("shop click")}
          />
          <ActionBar.Button
            type="danger"
            text="立即购买"
            onClick={() => handleClickToAddCar()}
          />
        </ActionBar>
      </div>
    </div>
  );
};

export default Index;
